<template>
  <div>
    <div class="user-box" v-if="!initLoading">
      <div class="box-item">
        <div>头像</div>
        <cropper
          :imageSrc="user?.avatar"
          imageStyle="width:100rpx;height:100rpx;"
          @change="changeCropper"
        ></cropper>
      </div>
      <div class="box-item" @click="toEditName">
        <div>昵称</div>
        <div class="box-item-right">
          <div class="te">{{ user?.nickName }}</div>
          <div class="icon icon-yao-1"></div>
        </div>
      </div>
      <div class="box-item" @click="toBindMobile">
        <div>手机</div>
        <div class="box-item-right">
          <div v-if="user?.mobile_text">{{ user?.mobile_text }}</div>
          <div class="text-grey" v-else>未绑定手机</div>
          <div class="icon icon-yao-1"></div>
        </div>
      </div>
      <!-- <div class="box-item" @click="toEditPwd">
        <div>密码</div>
        <div>
          <text>修改</text>
          <text class="icon icon-yao-1"></text>
        </div>
      </div> -->
      <div class="out-login" @click="outLogin">退出登录</div>
    </div>
    <init-load v-if="initLoading"></init-load>
  </div>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
import { uploadImage } from "@/api/common";
import { updateUser } from "@/api/user";
import { Result, ResultError } from "@/types";
import { onShow } from "@dcloudio/uni-app";
import { useUser } from "@/store";
import cropper from "@/components/ui/cropper/index.vue";
import { UserType } from "@/types";

import { storeToRefs } from "pinia";

const { user } = storeToRefs(useUser());

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref<boolean>(true);

onShow(() => {
  toInit();
});

const toInit = () => {
  if ($utils.checkLogin("login")) {
    initLoading.value = false;
  }
};

const saveHead = (fileUrl: string) => {
  updateUser({
    avatar: fileUrl,
  })
    .then((res: Result) => {
      useUser().setUser(res.data);
      $utils.successMsg("保存成功");
      user.value = res.data;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const toEditName = () => {
  $utils.routeRedirectTo("/otherpages/user/edit/name");
};

const toBindMobile = () => {
  $utils.routeRedirectTo("/otherpages/user/edit/bind_mobile");
};

const toEditPwd = () => {
  $utils.routeRedirectTo("/otherpages/user/edit/pwd");
};

//上传返回图片
const changeCropper = (res: any) => {
  uni.showLoading({
    title: "正在提交...",
  });
  if (res.cropper) {
    uploadImage(res.cropper)
      .then((res: Result) => {
        saveHead(res.data.file_url);
      })
      .catch((err: ResultError) => {
        $utils.errorMsg(err);
      });
  }
};

const outLogin = () => {
  uni.showModal({
    title: "友情提示",
    content: "确认要退出登录吗？",
    success(o) {
      if (o.confirm) {
        uni.showLoading({
          title: "正在退出...",
        });
        setTimeout(() => {
          uni.hideLoading();
          useUser().setToken(null);
          useUser().setUser(null);
          $utils.successMsg("退出登录成功");
          setTimeout(() => {
            $utils.routeRedirectTo("/pages/user/index");
          }, 1500);
        }, 1000);
      }
    },
  });
};
</script>
<style scoped>
.user-box {
  width: calc(100% - 40rpx);
  margin: 0 20rpx;
}
.box-item {
  height: 100rpx;
  line-height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}
.box-item-head {
  height: 100rpx;
  width: 100rpx;
}
.box-item .icon {
  color: var(--base-grey);
  margin-left: 10rpx;
}
.box-item-right{
  width: calc(100% - 140rpx);
  display: flex;
  justify-content: flex-end;
}
.out-login {
  height: 80rpx;
  line-height: 80rpx;
  width: 100%;
  text-align: center;
  background: #f0f0f0;
  margin-top: 100rpx;
}
</style>
